<template>
	<view class="pd-30" v-if="Object.keys(detail).length > 0">
		<navHead :datas="headData"></navHead>
		<view class="top-box flex-c-center pd-30" :class="{active:(detail.info.pay_status=='待核销' || detail.info.pay_status=='核销不成功')}">
			<view class="flex">
				<image class="wh-32 mr-10" src="https://cdn.oss.bon-top.cn/static_bc/images/order_icon3.png" v-if="detail.info.pay_status=='已付款'"></image>
				<image class="wh-32 mr-10" src="https://cdn.oss.bon-top.cn/static_bc/images/order_icon3.png" v-else-if="detail.info.pay_status=='待支付' || detail.info.pay_status=='分期待付' || detail.info.pay_status=='待核销'"></image>
				<image class="wh-32 mr-10" src="https://cdn.oss.bon-top.cn/static_bc/images/order_icon4.png" v-else></image>				
				<view class="ft-32 c-33 fw-800">{{detail.info.pay_status=='已付款'?'支付成功':detail.info.pay_status}}</view>
			</view>
			<view class="ft-22 c-99 mt-10" v-if="detail.info.pay_status=='核销不成功'" @click="showReasonContent(detail.info.reason)">核销不成功原因：<text class="c-bbq">点击查看</text></view>
			<view class="flex mt-30">
				<view class="ft-28 c-33 fw-800">{{'￥'}}</view>
				<view class="ft-68 ft-num c-33 fw-900">{{detail.info.price}}</view>					
			</view>
			<view class="ft mt-10">支付金额</view>
		</view>
		<view class="flex-c-center">
			<view class="progress-box pd-20">
				<view class="flex-bwt">
					<view class="ft-28 c-33 fw-800">支付信息</view>
					<view class="flex" @click="goPage('/subpackage/joinGroup/cashRegister?order_id='+detail.info.order_id+'&sub_id='+detail.pay_info.sub_id)" v-if="detail.info.pay_status=='核销不成功' || detail.info.pay_status=='待核销'">
						<view class="ft-24 c-99">修改</view>
						<image class="wh-22 ml-4" src="https://cdn.oss.bon-top.cn/static_bc/images/order_icon7.png"></image>
					</view>
				</view>
				<view class="pay-box pd-20" v-if="detail.pay_info">
					<view class="flex-bwt">
						<view class="ft-24 c-99">订单号</view>
						<view class="ft">{{detail.pay_info.ordernum}}</view>
					</view>
					<view class="flex-bwt mt-20">
						<view class="ft-24 c-99">支付方式</view>
						<view class="ft">{{detail.pay_info.pay_type}}</view>
					</view>
					<view class="flex-bwt mt-20" v-if="detail.pay_info.pay_type=='自行银行转账'">
						<view class="ft-24 c-99">支付到银行账号</view>
						<view class="ft">{{detail.pay_info.platform_bank_num}}</view>
					</view>
					<view class="flex-bwt mt-20" v-else>
						<view class="ft-24 c-99">支付平台</view>
						<view class="ft">{{detail.pay_info.pay_platform}}</view>
					</view>
					<view class="flex-bwt mt-20">
						<view class="ft-24 c-99">支付时间</view>
						<view class="ft">{{detail.pay_info.pay_time}}</view>
					</view>					
					<view class="flex-bwt mt-20">
						<view class="ft-24 c-99">支付流水单号</view>
						<view class="ft" style="width:412rpx;word-break: break-all;">{{detail.pay_info.out_trade_no}}</view>
					</view>
					<view class="flex-bwt mt-20" v-if="detail.pay_info.pay_type=='自行银行转账'">
						<view class="ft-24 c-99">转账截图</view>
						<view class="img-list flex-end">
							<image class="img-item" :src="item" mode="aspectFill" v-for="(item,index) in detail.pay_info.images" :key="index"></image>
						</view>
					</view>
					<view class="flex-bwt mt-20" v-if="detail.pay_info.pay_type=='自行银行转账'">
						<view class="ft-24 c-99">备注</view>
						<view class="ft">{{detail.pay_info.remark}}</view>
					</view>					
				</view>
				<view class="flex-c-center pay-box pd-20"  style="height: 290rpx;" v-else>
					<view class="ft-24 c-99">还没有支付信息，去支付</view>
					<view class="pay-btn mt-20"
					@click="setPayListSettlement">去支付</view>
				</view>
			</view>
			<view class="progress-box pd-20 mt-20" v-if="detail.info.order_type==1">
				<view class="ft-28 c-33 fw-800">分期支付节点</view>
				<view class="pay-box pd-20">
					<view class="flex-bwt">
						<view class="ft-24 c-99">款项名称</view>
						<view class="ft">{{detail.info.name}}</view>
					</view>
					<view class="flex-bwt mt-20">
						<view class="ft-24 c-99">付款节点</view>
						<view class="ft">{{detail.info.node}}</view>
					</view>
					<view class="flex-bwt mt-20">
						<view class="ft-24 c-99">付款时间</view>
						<view class="ft">{{detail.info.pay_time}}</view>
					</view>
				</view>
			</view>
			<view class="progress-box pd-20 mt-20" v-if="detail.info.order_type==1 ||  detail.price_info.reduce_list.length>0">
				<template v-if="detail.info.order_type==1">
					<view class="flex-bwt" style="align-items: flex-start;">
						<view class="ft-28 c-33 fw-800">支付项</view>
						<view class="ft-24 c-99" style="width:480rpx;word-break: break-all;text-align: right;">{{detail.price_info.today_currency_str}}</view>
					</view>
					<view class="pay-list">
						<view class="cardItem mt-20 pd-20" v-for="(item,index) in detail.price_info.list" :key="index">
							<view class="flex-bwt" :class="{border:item.isOpen==1}">
								<view class="ft fw-800 c-33">{{ item.name }}</view>
								<view class="flex" v-if="item.is_coupon===0"><text
										class="ft-num mr-8 ft-24">{{ item.formula}}</text>
									<image class="wh-24" :class="{down:item.isOpen!=1}" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_top.png" @click="item.isOpen=item.isOpen==1?0:1">
									</image>
								</view>
								<view class="flex" v-else><text class="ft icon_quan c-ff mr-10">券</text>
									<text class="ft-num c-red mr-8 ft-24">{{ item.formula }}</text>
									<image class="wh-24" :class="{down:item.isOpen!=1}" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_top.png" @click="item.isOpen=item.isOpen==1?0:1">
									</image>
								</view>
							</view>
							<view class="ft mt-20 c-99" v-if="item.isOpen==1">{{ item.txt}}</view>
						</view>
					</view>
				</template>
				
				<template v-if="detail.price_info.reduce_list.length>0">
					<view class="ft-28 c-33 fw-800" :class="{'mt-40':detail.info.order_type==1}">减免项</view>
					<view class="pay-list">
						<view class="cardItem mt-20 pd-20" v-for="(item,index) in detail.price_info.reduce_list" :key="index" @tap.stop="item.isOpen=item.isOpen==1?0:1">
							<view class="flex-bwt" :class="{border:item.isOpen==1}">
								<view class="ft fw-800 c-33">{{ item.name }}</view>
								<view class="flex"><text class="ft icon_quan c-ff mr-10">券</text>
									<text class="ft-num c-red mr-8 ft-24">-￥{{ item.reduce }}</text>
									<image class="wh-24" :class="{down:item.isOpen!=1}" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_top.png" >
									</image>
								</view>
							</view>
							<view class="ft mt-20 c-99" v-if="item.isOpen==1">{{ item.txt}}</view>
						</view>
					</view>
				</template>
				
				<view class="flex-end mt-40">
					<text class="ft c-red fw-800">{{ "共减￥" }}</text><text
						class="ft-num ft-28 c-red fw-900">{{detail.price_info.total_reduce_price_exchange }}</text><text
						class="ft c-red fw-800 mr-20">{{ "元" }}</text>
					<text class="ft-22 fw-800">{{ "合计￥" }}</text><text
						class="ft-num ft-44 fw-900">{{ detail.info.price }}</text>
					<text class="ft-22 fw-800">{{ "元" }}</text>
				</view>
				
			</view>
		</view>
		
		<view style="height: 166rpx;"></view>
		<view class="bottom">
			<view class="btn active" @click="back">
				确定
			</view>
		</view>
	</view>
	
	<up-popup :show="showReason" mode="bottom" round="14" @open="openReason">
		<view class="offers">
			<image class="popup-close wh-36" @click="closeReason"
				src="https://cdn.oss.bon-top.cn/static_bc/images/popup-close.png"></image>
			<view class="ft1">核销不成功原因</view>
			<view class="reason-content pd-20">
				<scroll-view scroll-y="true" class="scroll-Y-reason">
					<view v-html="reason"></view>
				</scroll-view>
			</view>
			<view class="bottomBtn flex-center">
				<view class="btn c-dbf flex-center ft" @click="showReason=false">确定</view>
			</view>
		</view>
	</up-popup>
</template>

<script setup lang="js">
	import {
		reactive,
		ref
	} from 'vue';
	import navHead from '@/components/navHead.vue';
	import dialogPop from '@/components/dialogPop.vue';
	import {
		utils
	} from '@/utils/utils.js';
	import {
		api
	} from '@/utils/api.js';
	import {
		onLoad
	} from "@dcloudio/uni-app";
	const headData = reactive({
		color: '#fff',
		title: '支付详情'
	})
	
	const setPayListSettlement=()=>{
		utils
		.request(
			api.payListSettlement, {
			id:detail.value.info?.order_id,
			check_ids: [detail.value.info?.id],
			is_sub:1
			// reduce_id: reduce_id.value,
			// is_use_group: detail.is_can_use_group == 1 && delGroup == 0 ? 1 : 0,
			// is_use_newcomer: detail.is_can_use_group == 1 && delGroup == 0 ? 1 : 0,
			// integral: integral.value

		},
			"post"
		)
		.then((res) => {
			// orderSettlementInfo.value = res.data
			uni.navigateTo({url:'/subpackage/joinGroup/cashRegister?order_id=' + detail.value.info.order_id})
			// goPage('/subpackage/joinGroup/cashRegister?order_id=' + detail.info.order_id)
		});
	}
	const detail = ref({})
	const orderId = ref('')
	const payId = ref('')
	const id = ref('')

	onLoad((options) => {
		orderId.value = options?.order_id || ''
		payId.value = options?.pay_id || ''
		id.value = options?.id || ''
		utils
			.request(
				api.payListDetail, {
					order_id: orderId.value,
					pay_id: payId.value,
					id: id.value,
				},
				"get"
			)
			.then((res) => {
				detail.value = res.data
			});
	})
	
	const reason = ref('')
	const showReasonContent = (val) => {
		reason.value = val
		showReason.value = true
	}
	
	const showReason = ref(false);
	const closeReason = () => {
		showReason.value = false
	}
	const openReason = () => {
		showReason.value = true
	}
	
	// 跳转
	const goPage = (url) => {
		uni.navigateTo({
			url: url,
		});
	}
	const back = () => {
		uni.navigateBack()
	}
</script>

<style lang="scss" scoped>
	.top-box{
		width: 690rpx;
		background: linear-gradient( 0deg, #FFFFFF 0%, #FBFFDF 100%);
		border-radius: 40rpx 40rpx 0rpx 0rpx;
	}
	.top-box.active{
		background: linear-gradient( 180deg, #F2F2FF 0%, #FFFFFF 100%);
	}
	
	.pay-btn {
		background: #DBF046;
		border-radius: 20rpx;
		padding: 12rpx 40rpx;
		box-sizing: border-box;
		width: fit-content;
	}
	
	.progress-box {
		width: 690rpx;
		background: #F8F8F8;
		border-radius: 40rpx;
	
		.pay-list{
			.cardItem {
				width: 650rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				.border{
					border-bottom: 2rpx solid #f1f1f1;
					padding-bottom: 20rpx;
				}
				.down{
					transform: rotate(180deg);
				}
				.icon_quan {
					width: 32rpx;
					height: 32rpx;
					background: #ff0000;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					text-align: center;
				}
			}
		}
	
		.pay-box {
			width: 650rpx;
			background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
			border-radius: 0rpx 0rpx 20rpx 20rpx;
			.img-list{
				width: 480rpx;
				flex-wrap: wrap;
				.img-item{
					width: 100rpx;
					height: 128rpx;
					margin-bottom: 10rpx;
					margin-left: 20rpx;
				}
			}
			.flex-bwt{
				align-items: flex-start;				
				.ft{
					width: 412rpx;
					text-align: right;
					word-break: break-all;
				}
			}
		}
	
		.product-item {
			width: 650rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			display: flex;
	
			.imgs {
				width: 142rpx;
				height: 174rpx;
				flex-shrink: 0;
				border-radius: 20rpx;
			}
			
			.avtor {
				width: 108rpx;
				height: 108rpx;
				background: #ffffff;
				border: 2rpx solid #dbf046;
				border-radius: 50%;
			
				.img {
					width: 92rpx;
					height: 92rpx;
					border-radius: 50%;
				}
			}
	
			.tip {
				padding: 12rpx 20rpx;
				box-sizing: border-box;
				background: #F1F1F1;
				border-radius: 30rpx;
				width: fit-content;
			}
		}
		
		.price-info{
			width: 650rpx;			
			background: linear-gradient( 180deg, rgba(255,255,255,0) 0%, #FFFFFF 100%);
			border-radius: 0rpx 0rpx 20rpx 20rpx;
		}
	
		.list_detail_item {
			margin-top: 20rpx;
			align-items: flex-start;
			word-break: break-all;
	
			.copy-btn {
				padding: 2rpx 6rpx;
				background: #F1F1F1;
				border-radius: 8rpx;
				box-sizing: border-box;
			}
	
			.ft-24 {
				white-space: nowrap;
				margin-right: 20rpx;
			}
	
			.ft {
				text-align: right;
			}
		}
	}
	
	.bottomBtn {
		position: fixed;
		z-index: 99;
		bottom: 0;
		left: 0;
		background: #F8F8F8;
		width: 100%;
		padding-top: 20rpx;
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		box-shadow: 0rpx -2rpx 2rpx 2rpx rgba(0, 0, 0, 0.05);
	
		.btn {
			width: 448rpx;
			height: 78rpx;
			background: #333333;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
		}
	}
	
	.offers {
		height: 70vh;
		background: #f8f8f8;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		//border: 2rpx solid red;
		position: relative;
		padding: 40rpx;
		padding-bottom: calc(118rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(118rpx + env(safe-area-inset-bottom));
		box-sizing: border-box;
		width: 100vw;
	
		.popup-close {
			position: absolute;
			top: 44rpx;
			right: 44rpx;
		}
	
		.reason-content {
			width: 670rpx;
			background: #FFFFFF;
			border-radius: 40rpx;
			height: calc(100% - 128rpx + env(safe-area-inset-bottom));
			margin-top: 20rpx;
			font-size: 28rpx;
			color: #666666;
		}
	
		.scroll-Y-reason {
			height: 100%;
		}
	
		.pay-list-box {
			height: calc(70vh - 84rpx + env(safe-area-inset-bottom));
	
			.scroll-Y {
				height: 100%;
			}
	
			.m {
				width: 670rpx;
				background: #FFFFFF;
				border-radius: 40rpx;
				font-weight: 800;
				font-size: 28rpx;
				color: #333333;
	
				.comboItem {
					background: #F8F8F8;
					border-radius: 20rpx;
				}
			}
		}
	}
	
	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		display: flex;
		align-items: start;
		justify-content: flex-end;
		background-color: #F8F8F8;
		box-sizing: border-box;
		padding: 10rpx 30rpx;
		padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
		box-shadow: 0rpx -2rpx 2rpx 2rpx rgba(0, 0, 0, 0.05);
	
		.btn {
			height: 78rpx;
			width: 100%;
			line-height: 78rpx;
			text-align: center;
			font-size: 28rpx;
			color: #333;
			background-color: #F1F1F1;
			border-radius: 20rpx;
		}
	
		.active {
			background-color: #333;
			color: #fff;
		}
	}
</style>